<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            border: 0;
            margin: 0;
        }
        .box{
            width: 1200px;
            margin: 0 auto;
        }
        .left{
            width: 400px;
            height: 400px;
            border: 1px solid #ccc;
            position: relative;
        }
        .mask{
            display: none;
            position: absolute;
            left: 0;
            top: 0;
            width: 300px;
            height: 300px;
            background-color: #FEDE4F;
            opacity: .5;/* 半透明 .5 百分之50 */
            cursor: move; /* 鼠标经过 鼠标变成十字架 */
        }
        .big{
            position: absolute;
            left: 410px;
            top: 0;
            width: 500px;
            height: 500px;
            background-color: pink;
            display: none;
            overflow: hidden; /* 溢出内容隐藏 */
        }
        .big img{
            position: absolute;
            left: 0;
            top: 0;
        }
    </style>
    <script>
        window.addEventListener('load',function(){ // h5加载完成之后再执行我们的js
            var left = document.querySelector('.left');
            var mask = document.querySelector('.mask');
            var big = document.querySelector('.big');
            // 1. 当我们鼠标经过 left 就是显示和隐藏 mask 遮挡层 和 big 大盒子
            left.addEventListener('mouseover',function(){ // mouseover 鼠标经过
                mask.style.display = 'block';
                big.style.display = 'block';
            });
            left.addEventListener('mouseout',function(){ // mouseout 鼠标离开
                mask.style.display = 'none';
                big.style.display = 'none';
            });
            left.addEventListener('mousemove',function(e){ // mousemove 鼠标移动
                // (1). 先计算鼠标在盒子内的坐标
                var x = e.pageX - this.offsetLeft;
                var y = e.pageY - this.offsetTop;
                // console.log(x,y);
                // (2). 减去盒子的高度 300的一半是 150 就是我们mask 的最终 left 和 top 值了
                // (3). 我们mask 移动的距离
                var maskX = x - mask.offsetWidth / 2;
                var maskY = y - mask.offsetHeight / 2;
                // (4). 如果x 坐标小于了0 就让他停在 0 的位置
                // 遮挡层的最大移动距离
                var maskMax = left.offsetWidth - mask.offsetWidth;// left盒子 减去 mask盒子 就是它的最大移动距离 因为盒子是正方形 所以长度宽度都是一样的
                if(maskX <= 0){
                    maskX = 0;
                }else if (maskX >= maskMax){ // left盒子 减去 mask盒子 就是它的最大移动距离 因为盒子是正方形 所以长度宽度都是一样的
                    maskX = maskMax;
                }
                if(maskY <= 0){
                    maskY = 0;
                }else if (maskY >= maskMax){ // left盒子 减去 mask盒子 就是它的最大移动距离 因为盒子是正方形 所以长度宽度都是一样的
                    maskY = maskMax;
                }
                mask.style.left = maskX + 'px';
                mask.style.top = maskY + 'px';
                // 3. 大图片的移动距离 = 遮挡层移动距离 * 大图片的最大移动距离 / 遮挡层的最大移动距离
                // 大图
                var bigImg = document.querySelector('.bigImg');
                // 大图片的最大移动距离
                var bigMax = bigImg.offsetWidth - big.offsetWidth;
                // 大图片的移动距离 x y
                var bigX = maskX * bigMax / maskMax;
                var bigY = maskY * bigMax / maskMax;
                // 遮挡图是往右移动 大图就要往反方向移动 所以大图的移动值应该是负的
                bigImg.style.left = -bigX + 'px';
                bigImg.style.top = -bigY + 'px';
            });
        });
    </script>
</head>
<body>
    <div class="box">
        <div class="left">
            <img src="images/b3.png" alt="" width="400px" height="400px">
            <div class="mask"></div>
            <div class="big">
                <img src="images/b3.png" alt="" class="bigImg">
            </div>
        </div>
    </div>
</body>
</html>